<template>
  <div class="dashboard-container">
    <el-card shadow="hover">
      <div slot="header">
        <span>基本信息</span>
      </div>
      <el-row>
        <el-col :span="8">
          <el-card shadow="hover">
            <div slot="header">
              <span>用户数据</span>
            </div>
            <span class="inf">{{info.userCount.count}}</span>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="hover">
            <div slot="header">
              <span>图片数据</span>
            </div>
            <span class="inf">{{info.imgCount.count}}</span>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="hover">
            <div slot="header">
              <span>新闻数据</span>
            </div>
            <span class="inf">{{info.newsCount.count}}</span>
          </el-card>
        </el-col>
      </el-row>
      <div style="display:flex;justify-content:space-between;">
        <div id="echarts1" />
        <div id="echarts2" />
        <div id="echarts3" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getBase } from "@/api/dashboard";
var echarts = require("echarts");

export default {
  name: "Dashboard",
  data() {
    return {
      info: {
        imgCount: {},
        newsCount: {},
        userCount: {},
      },
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created() {
    this.getBasedate();
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById("echarts1"));
    this.myChart2 = echarts.init(document.getElementById("echarts2"));
    this.myChart3 = echarts.init(document.getElementById("echarts3"));
  },
  methods: {
    getBasedate() {
      getBase().then((res) => {
        this.info = res;
        this.initChart();
      });
    },
    initChart() {
      var xData = [];
      var yData = [];
      for (var i = 0; i < this.info.imgCountByDay.length; i++) {
        var imgitem = this.info.imgCountByDay[i];
        xData.push(imgitem.date);
        yData.push(imgitem.count);
      };
      var xUserData = [];
      var yUserData = [];
      for (var i = 0; i < this.info.userCountByDay.length; i++) {
        var useritem = this.info.userCountByDay[i];
        xUserData.push(useritem.date);
        yUserData.push(useritem.count);
      };
      console.log(xUserData,yUserData)
      this.myChart.setOption({
        title: {
          text: "用户统计",
        },
        tooltip: {},
        xAxis: {
          data: xUserData,
          axisLabel: {
            rotate: 30,
          },
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: yUserData,
          },
        ],
      });
      this.myChart2.setOption({
        title: {
          text: "图片统计",
        },
        tooltip: {},
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 30,
          },
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "line",
            data: yData,
          },
        ],
      });
      this.myChart3.setOption({
        title: {
          text: "新闻统计",
        },
        tooltip: {},
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 30,
          },
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "line",
            data: yData,
          },
        ],
      });
      this.myChart.on("click", function (params) {
        console.log(params);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    ::v-deep .el-card {
      margin: 20px;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
#echarts1 {
  width: 300px;
  height: 300px;
  margin: 30px auto;
  background-color: orange;
}
#echarts3 {
  width: 300px;
  height: 300px;
  margin: 30px auto;
  background-color: pink;
}
#echarts2 {
  width: 300px;
  height: 300px;
  margin: 30px auto;
  background-color: green;
}
.inf {
  color: blue;
}
</style>
